<!DOCTYPE html>
<html>

<head>
<title></title>
   #parse("sys/header.html")
</head>
   <title>Bootstrap 实例 - 边框表格</title>
<style>
   table{table-layout:fixed;}
    table tr th:first-child,table tr td:first-child{width:160px}
	table tr th,table tr td{width:70px;}
	table tr th,table tr td:first-child{width:70px;text-align:center}
</style>
 <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <!-- <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
<body>
<select id="liebiao" class="form-control col-sm-2" onchange="show_sub(this.options[this.options.selectedIndex].value,this.options[this.options.selectedIndex].label)">


</select>
        <span>&nbsp;</span>

<input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'d4312\')}'})"/>
        至<input  id="d4312" class="Wdate" type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'d4311\')}'})"/>&nbsp;
	   <input type="button" class="btn btn-default" value="查询" id="search" onclick="getlist()"/>
 <a href="../crosstable/export" id="execl" onclick="exportExecl()">导出Excel</a>
<div id = "div_table" style=" overflow:scroll;">
<table class="table table-bordered" style="text-align:right">
   <caption id="caption"></caption>
   
   <thead>
      <tr id="thead_tr">

      </tr>
   </thead>
   <tbody id="tbody_tr">

   </tbody>
</table>
</div>
<script>
   var type;
    var title;
	var body_height = document.documentElement.clientHeight - 40;
	console.log('-----body:'+body_height);
	$("#div_table").css('height',body_height+'px');
	
    $(function () {
        $.get("../crosstable/reportlist", function(r){

            var list = r.reportlist;
            var html='';
            html+='<option value="0">请选择报表标题</option>';
            $.each(list,function(index,item){

                html+='<option value="'+item.type+'" label="'+item.name+'"  >'+item.name+'</option>';

            });
            $("#liebiao").html(html);

        });

    });

   function show_sub(v,name){

       type=v;
       title=name;

   }


    function getlist() {
        var url="../crosstable/getcrosstablelist";
        $.ajax({

            type: "POST",
            url: url,

            data: {'type':type,'sdate':$("#d4311").val(),'edate':$("#d4312").val()},
            success: function (r) {
                if (r.code === 0) {

                    var arr=[];
                    arr=JSON.parse(r.crosstablelist);
                    var trhtml='';
                $.each(arr,function(index,item){

                if(index===0) {
                           var html='';
                         $.each(item.split(","), function (index, item) {

                             var i=item;

                                 html+='<th>'+i+'</th>';


                         });

                         $("#thead_tr").html(html);
                     }else{
                    trhtml+='<tr>'
                         $.each(item.split(","), function (index, item) {
                             var i=item;

                             if(i==0){
                                 trhtml+='<td></td>';
                             }else{
                                 trhtml+='<td>'+i+'</td>';
                             }
                         });
                    trhtml+='</tr>';

                     }

                    });
                    $("#tbody_tr").html(trhtml);
                } else {
                    alert(r.msg);
                }
            }
        });
    }

   function exportExecl(){


       var sdate=$("#d4311").val(); //可以是一个可变的值
       var edate=$("#d4312").val(); //可以是一个可变的值

       document.getElementById("execl").href="../crosstable/export?title="+title+"&type="+type+"&sdate="+sdate+"&edate="+edate+"";
   }
</script>
</body>
</html>